<template>
  <div>

    
    <SkyLayoutRow type="flex" align="middle">
      <SkyLayoutCol :width="300">
        <SkyInput
          v-model="inputValue"
          placeholder="关键字搜索"
          style="margin-bottom:20px;margin:10px 20px"
        ></SkyInput>
      </SkyLayoutCol>
      <SkyLayoutCol :span="6">
        <SkyButton type="primary" @click="search">搜索</SkyButton>
      </SkyLayoutCol>
    </SkyLayoutRow>
    
    

    <SkyCardPanel title="十万条数据不分页">
      <div slot="header-right">
        <sky-button type="primary" @click="addline">新增一条</sky-button>
      </div>
      <div slot="main" class="containter-table">
        <sky-table
          ref="skytable"
          v-slot="row"
          FixedHead
          LargeData
          showcheckbox 
          :maxheight="maxheight"
          :data="fixedheadtableData"
          @getCurrent="getCurrent"
        >
          <sky-column :row="row.scope" prop="name" label="名称"></sky-column>
          <sky-column :row="row.scope" prop="type" label="单据类型">
          </sky-column>
          <sky-column
            :row="row.scope"
            prop="havemoney"
            label="已分摊金额"
            align="right"
          ></sky-column>
          <sky-column
            :row="row.scope"
            prop="waitmoney"
            label="未分摊金额"
            align="right"
          ></sky-column>
          <sky-column :row="row.scope" label="操作">
            <div class="tools">
              <a>分摊</a>
              <a>查看分摊</a>
            </div>
          </sky-column>
        </sky-table>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
          &lt;sky-table 
            ref="skytable"
            v-slot="row" 
            FixedHead 
            LargeData 
            :maxheight="maxheight"
            :data="fixedheadtableData"
            @getCurrent="getCurrent"
            &gt;
            &lt;sky-column :row="row.scope" prop="name" label="名称"&gt;&lt;/sky-column&gt;
            &lt;sky-column :row="row.scope" prop="type" label="单据类型"&gt; &lt;/sky-column&gt;
            &lt;sky-column :row="row.scope" prop="havemoney" label="已分摊金额" align='right'&gt;&lt;/sky-column&gt;
            &lt;sky-column :row="row.scope" prop="waitmoney" label="未分摊金额" align='right'&gt;&lt;/sky-column&gt;
            &lt;sky-column :row="row.scope" label="操作"&gt;
              &lt;div class="tools"&gt;
                &lt;a&gt;分摊&lt;/a&gt;
                &lt;a&gt;查看分摊&lt;/a&gt;
              &lt;/div&gt;
            &lt;/sky-column&gt;
          &lt;/sky-table&gt;
              
          </code>
      </pre>

        <pre>
          <code class="javascript">
              
          export default {
            data () {
              return {
                maxheight:350,
                //固定表头
                fixedheadtableData: [],
              }
            },
            mounted(){
                let toThousandDecimalFilter = this.$options.filters[
                  "toThousandDecimalFilter"
                ]  
                this.maxheight = document.body.offsetHeight - 230;
                for (let index = 0; index < 100000; index++) {
                  this.fixedheadtableData.push( {
                    id: index+1,
                    name: '人防工程监理'+'('+(index+1)+')',
                    type: '单据类型'+index,
                    havemoney:toThousandDecimalFilter(index+1) ,
                    waitmoney:toThousandDecimalFilter(200000.00+index) ,
                  },)
                }

            },
            methods: {
              getCurrent (row, eventType) {
                eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                console.log(row)
              },
              addline () {
                let toThousandDecimalFilter = this.$options.filters[
                  "toThousandDecimalFilter"
                ]
                let random = this.$refs['skytable']['randomId']
                this.fixedheadtableData.push({
                  id: random(),
                  name: '人防工程监理' + random(),
                  type: '单据类型',
                  havemoney: toThousandDecimalFilter(312134131),
                  waitmoney: toThousandDecimalFilter(556746436),
                })
                /**
                * 特别申明 添加后必须调用下面api
                */
                this.$refs['skytable'].ReFreshComponent("ReFreshTbody");
              }
            }
          }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxheight: 350,
      //固定表头
      fixedheadtableData: [],
      inputValue: '',
    }
  },
  mounted() {
    let toThousandDecimalFilter = this.$options.filters[
      'toThousandDecimalFilter'
    ]
    this.maxheight = document.body.offsetHeight - 230
    for (let index = 0; index < 100000; index++) {
      this.fixedheadtableData.push({
        id: index + 1,
        name: '人防工程监理' + '(' + (index + 1) + ')',
        type: '单据类型' + index,
        havemoney: toThousandDecimalFilter(index + 1),
        waitmoney: toThousandDecimalFilter(200000.0 + index),
      })
    }
  },
  methods: {
    getCurrent(row, eventType) {
      eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
      console.log(row)
    },
    addline() {
      let toThousandDecimalFilter = this.$options.filters[
        'toThousandDecimalFilter'
      ]
      let random = this.$refs['skytable']['randomId']
      this.fixedheadtableData.push({
        id: random(),
        name: '人防工程监理' + random(),
        type: '单据类型',
        havemoney: toThousandDecimalFilter(312134131),
        waitmoney: toThousandDecimalFilter(556746436),
      })
      /**
       * 特别申明 添加后必须调用下面api
       */
      this.$refs['skytable'].ReFreshComponent('ReFreshTbody')
    },
    search() {
      this.$refs.skytable.searchFilter(this.inputValue, 'name')
    },
  },
}

</script>

<style></style>
